<template>
  <div>

    <!--legend-->
    <div id="legend" ref="legend">
      <template v-for="item in legendData">
        <div class="legend-item" :key="item.key"
             @click="toggleSlice(item)"
             @mouseover="hoverSlice(item.index)"
             @mouseout="blurSlice(item.index)">
          <div class="legend-marker" :style="{background: item.visible ? item.color : '#ddd'}"></div>
          <div class="legend-value">{{ item.category }}</div>
        </div>
      </template>
    </div>

    <!--chart-->
    <div class="hello" ref="chartdiv">
    </div>

  </div>

</template>

<script>
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

am4core.useTheme(am4themes_animated);

let colors = [
  am4core.color("#30B8FC"),
  am4core.color("#FFDC53"),
  am4core.color("#2EF5AC"),
  am4core.color("#FF9671"),
  am4core.color("#FFC75F"),
  am4core.color("#F9F871"),
];

export default {
  name: "PieDemo",
  data() {
    return {
      legendData: []
    }
  },
  mounted() {
    let chart = am4core.create(this.$refs.chartdiv, am4charts.PieChart3D);
    this.chart = chart
    // chart.radius = am4core.percent(50);
    chart.depth = 80
    chart.angle = 40
    chart.data = [
      {
        country: "一类隧道",
        litres: 300,
        height: 36
      },
      {
        country: "三类隧道",
        litres: 320,
        height: 20
      },
      {
        country: "二类隧道",
        litres: 280,
        height: 30
      }
    ];

    let series = chart.series.push(new am4charts.PieSeries3D());
    series.slices.template.tooltipHTML =
        `
          <div style="font-size: 14px; text-align: left">
            {category}
          </div>
          <div style="display: flex; flex-direction: row; font-size: 14px; text-align: left">
            {value}座({percent}%)
          </div>
        `

    series.alignLabels = false;
    series.ticks.template.tooltipText = "{value}"

    this.series = series
    this.setCustomLegend()
    this.setTextInPieMiddle();

    series.dataFields.value = "litres";
    series.dataFields.depthValue = "height";
    series.dataFields.category = "country";
    series.colors.list = colors

    this.removeChartLogo()
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {

    removeChartLogo() {
      let elements = document.querySelectorAll("[aria-labelledby$=-title]");
      elements.forEach((ele) => {
        ele.style.visibility = "hidden";
      })
    },

    setCustomLegend() {
      this.chart.colors.list = colors
      let that = this
      this.chart.events.on("ready", function (event) {
        // populate our custom legend when chart renders
        that.chart.customLegend = that.$refs.legend;
        let legendDataTemp = []
        that.series.dataItems.each((row, i) => {
          let color = that.chart.colors.getIndex(i);
          row.color = color
          let percent = Math.round(row.values.value.percent * 100) / 100;
          let value = row.value;
          let category = row.category
          let index = i
          row.percent = percent
          let depthValue = row.depthValue
          let visible = 1
          legendDataTemp.push({color, percent, value, category, depthValue, index, visible})
        });
        legendDataTemp.sort((a, b) => b.depthValue - a.depthValue)
        that.legendData = legendDataTemp
      });
    },

    setTextInPieMiddle() {
      let that = this
      this.chart.innerRadius = am4core.percent(55);
      let container = new am4core.Container();
      container.parent = this.series;
      container.horizontalCenter = "middle";
      container.verticalCenter = "middle";
      container.width = am4core.percent(55) / Math.sqrt(2);
      container.fill = "white";

      let label = new am4core.Label();
      label.parent = container;
      label.text = "总数{values.value.sum}座";
      label.horizontalCenter = "middle";
      label.verticalCenter = "middle";
      label.fontSize = 25;

      this.chart.events.on("sizechanged", function (ev) {
        let scale = (that.series.pixelInnerRadius * 2) / label.bbox.width;
        if (scale > 1) {
          scale = 1;
        }
        label.scale = scale;
      })
    },

    toggleSlice(item) {
      let slice = this.series.dataItems.getIndex(item.index);
      item.visible = slice.visible ? 0 : 1
      if (slice.visible) {
        slice.hide();
      } else {
        slice.show();
      }
    },

    hoverSlice(item) {
      let slice = this.series.slices.getIndex(item);
      slice.isHover = true;
    },

    blurSlice(item) {
      let slice = this.series.slices.getIndex(item);
      slice.isHover = false;
    }

  }
}
</script>

<style lang="less" scoped>
.hello {
  width: 600px;
  height: 400px;
}

#legend {
  display: flex;
  flex-direction: row;

  .legend-item {
    margin: 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    background: #eee;
    flex-direction: row;

    .legend-value {
      font-size: 12px;
      font-weight: normal;
      margin-left: 4px;
    }

    .legend-marker {
      display: inline-block;
      width: 12px;
      height: 12px;
    }
  }
}

</style>
